<template>
	<view class="ticket-page">
		<!-- 标签页导航 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				计次票
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				计时票
			</view>
			<view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
				期限票
			</view>
		</view>

		<!-- 门票列表 -->
		<view class="ticket-list">
			<view class="ticket-item" 
				  v-for="(ticket, index) in currentTickets" 
				  :key="index" 
				  @click="handleTicketClick(ticket, index)">
				<view class="ticket-name">{{ ticket.name }}</view>
				<view class="price-container">
					<text class="current-price">¥{{ ticket.price }}</text>
					<text class="original-price">¥{{ ticket.originalPrice }}</text>
				</view>
				<view class="ticket-info">
					<view class="info-item" v-if="ticket.count">套餐数量: {{ ticket.count }}次</view>
					<view class="info-item" v-else-if="ticket.duration">套餐数量: {{ ticket.duration }}分钟</view>
					<view class="info-item">有效期: {{ ticket.validity }}</view>
					<view class="info-item">可用周期: {{ ticket.availableDays }}</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="currentTickets.length === 0">
				<text>暂无相关门票</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				// 计次票数据
				countTickets: [{
						name: "30次门票",
						price: "98.00",
						originalPrice: "140",
						count: 30,
						validity: "自购买起30天内有效",
						availableDays: "周一，周三，周五，周六，周日"
					},
					{
						name: "20次门票",
						price: "98.00",
						originalPrice: "140",
						count: 20,
						validity: "2025/9/30 00:00:00 - 2025/10/8 23:59:59",
						availableDays: "周一，周三，周五，周六，周日"
					}, {
						name: "30次门票",
						price: "98.00",
						originalPrice: "140",
						count: 30,
						validity: "自购买起30天内有效",
						availableDays: "周一，周三，周五，周六，周日"
					},
					{
						name: "20次门票",
						price: "98.00",
						originalPrice: "140",
						count: 20,
						validity: "2025/9/30 00:00:00 - 2025/10/8 23:59:59",
						availableDays: "周一，周三，周五，周六，周日"
					}, {
						name: "30次门票",
						price: "98.00",
						originalPrice: "140",
						count: 30,
						validity: "自购买起30天内有效",
						availableDays: "周一，周三，周五，周六，周日"
					},
					{
						name: "20次门票",
						price: "98.00",
						originalPrice: "140",
						count: 20,
						validity: "2025/9/30 00:00:00 - 2025/10/8 23:59:59",
						availableDays: "周一，周三，周五，周六，周日"
					}
				],
				// 计时票数据
				timeTickets: [{
					name: "350分钟小时票",
					price: "98.00",
					originalPrice: "140",
					duration: 350,
					validity: "永久",
					availableDays: "周一，周三，周五，周六，周日"
				}],
				// 期限票数据
				periodTickets: [{
						name: "国庆期限票",
						price: "98.00",
						originalPrice: "140",
						validity: "2025/10/1 00:00:00 - 2025/10/8 23:59:59",
						availableDays: "周一，周三，周五，周六，周日"
					},
					{
						name: "季节票",
						price: "98.00",
						originalPrice: "140",
						validity: "2025/9/30 00:00:00 - 2025/10/8 23:59:59",
						availableDays: "周一，周三，周五，周六，周日"
					}
				]
			};
		},
		computed: {
			// 根据当前标签返回对应的门票数据
			currentTickets() {
				if (this.currentTab === 0) {
					return this.countTickets;
				} else if (this.currentTab === 1) {
					return this.timeTickets;
				} else {
					return this.periodTickets;
				}
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.ticketList')
			});
		},
		methods: {
			// 切换标签页
			switchTab(index) {
				this.currentTab = index;
			},
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 处理门票点击
			handleTicketClick(ticket, index) {
				// 可以在这里添加点击门票后的处理逻辑
				const coinPackageNo = '123456'
				uni.navigateTo({
					url: `/pages/ticket/ticket-order?coinPackageNo=${coinPackageNo}`
				});
				
				console.log('点击了门票:', ticket, '索引:', index);
				// 例如，可以跳转到订单确认页面等
			}
		}
	};
</script>

<style scoped>
	.ticket-page {
		background-color: #f5f5f5;
		height: 100%;
		display: flex;
		flex-direction: column;
		
	}

	/* 标签页导航样式 */
	.tabs {
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		border-bottom: 1px solid #eeeeee;
		height: 88rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 16px;
		color: #666666;
		position: relative;
	}

	.tab-item.active {
		color: #ff4d4f;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background-color: #ff4d4f;
	}

	/* 门票列表样式 */
	.ticket-list {
		padding: 12px;
		overflow-y: auto;
		flex: 1;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 200px;
		color: #999999;
		font-size: 14px;
	}

	.ticket-item {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.ticket-name {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 12px;
		color: #333333;
	}

	.price-container {
		margin-bottom: 12px;
		display: flex;
		align-items: center;
	}

	.current-price {
		font-size: 20px;
		color: #ff4d4f;
		font-weight: 600;
		margin-right: 8px;
	}

	.original-price {
		font-size: 14px;
		color: #999999;
		text-decoration: line-through;
	}

	.ticket-info {
		margin-bottom: 16px;
	}

	.info-item {
		font-size: 14px;
		color: #666666;
		margin-bottom: 6px;
	}
</style>